<template>
  <noTabBarPage
    :scroll-props="{ onPulldown, height: '100%' }"
    custom-class="jifen-rank"
  >
    <div class="jifen-rank__wrapped">
      <div class="jifen-rank__header">
        <image :src="avatar" class="jifen-rank__header-avater" />
        <span class="jifen-rank__header-nickname">{{ nickname }}</span>
      </div>
      <div class="jifen-rank__content">
        <div class="jifen-rank__content-panel">
          <div class="jifen-rank__content-panel_header">
            <span>我的名次：{{ rank ? rank : "--" }}</span>
            <span>我的积分：{{ points }}</span>
          </div>
          <div class="jifen-rank__content-panel_content">
            <RankList :data="rankList" />
          </div>
        </div>
      </div>
    </div>
  </noTabBarPage>
</template>

<script setup lang="ts">
import noTabBarPage from "@/components/common-page/noTabBar-page.vue";
import RankList from "./components/rank-list.vue";
import "./index.less";
import { useDidShow } from "@tarojs/taro";
import { ref } from "vue";
import { apiQuerySelfPoints, apiQueryselfPointsRank } from "@/apis/jifen";
import { ResponseCodeEnum } from "@/constants/index";
import { useUserInfo } from "@/hooks/useUserInfo";
defineOptions({
  name: "jifen-rank",
});

const { nickname, avatar } = useUserInfo();
const points = ref(0);
const rank = ref<number | null>(null);
const rankList = ref([]);
const pagination = ref({ page: 1, pageSize: 20 });

useDidShow(() => {
  querySelfPointsServer();
  queryPointsRank();
});

const onPulldown = async (done: Function) => {
  try {
    await queryPointsRank();
    await querySelfPointsServer();
  } catch (error) {
  } finally {
    done();
  }
};

const queryPointsRank = () => {
  apiQueryselfPointsRank(pagination.value).then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      rankList.value = data.items || [];
    }
  });
};

const querySelfPointsServer = () => {
  apiQuerySelfPoints().then((res: any) => {
    const { code, data } = res;
    if (code === ResponseCodeEnum.SUCCESS) {
      points.value = data.value;
      rank.value = data.rank;
    }
  });
};
</script>
